import React from 'react';
// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 定义一个有状态组件，类组件
class Counter extends React.Component {
  constructor() {
    // 初始化this
    super();
    this.state = {
      count: 0,
    };
  }
  // 自增事件处理函数
  handleClick() {
    console.log('this', this);
    // 自增
    this.setState({
      count: this.state.count + 1,
    });
  }

  // 渲染UI
  render() {
    return (
      <div>
        <h1>我是一个有状态组件</h1>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => this.handleClick()}>+1</button>
      </div>
    );
  }
}

// 使用函数原型上的bind方法绑定
class Counter2 extends React.Component {
  constructor() {
    // 初始化this
    super();
    this.state = {
      count: 0,
    };
    this.handleClick2 = this.handleClick.bind(this);
  }
  // 自增事件处理函数
  handleClick() {
    console.log('this', this);
    // 自增
    this.setState({
      count: this.state.count + 1,
    });
  }

  // 渲染UI
  render() {
    return (
      <div>
        <h1>我是一个有状态组件2</h1>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={this.handleClick2}>+1</button>
      </div>
    );
  }
}

class Counter3 extends React.Component {
  constructor() {
    // 初始化this
    super();
    this.state = {
      count: 0,
    };
  }
  // 自增事件处理函数
  handleClick = () => {
    console.log('this', this);
    this.setState({
      count: this.state.count + 1,
    });
  };

  // 渲染UI
  render() {
    return (
      <div>
        <h1>我是一个有状态组件3</h1>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

// 渲染这个标签（React 元素）
root.render(
  <div>
    <Counter />
    <Counter2 />
    <Counter3 />
  </div>
);
